import {FC} from 'react'
import cn from 'classnames'
import {BsPersonPlusFill} from "react-icons/all";
import styles from './SubscribeButton.module.scss'
import {useAuth} from "@/hooks/useAuth";
import {api} from "@/store/api/api";

interface ISubscribeButton {
    channelIdForSubscribe: number
}

const SubscribeButton: FC<ISubscribeButton> = ({channelIdForSubscribe}) => {
    const {user} = useAuth()
    const {data: profile} = api.useGetProfileQuery(null, {
        skip: !user
    })
    const [subscribe, {isLoading, data}] = api.useSubscribeToChannelMutation()

    if (user?.id === channelIdForSubscribe) return null

    const isSubscribed = profile?.subscriptions?.some(sub => sub.toChannel.id === channelIdForSubscribe) || !data

    return (
        <button
            className={cn(styles.button, {
            [styles.subscribed]: isSubscribed
        })}
            onClick={() => subscribe(channelIdForSubscribe).unwrap()}
            disabled={isLoading}
        >
            <BsPersonPlusFill />
            {isSubscribed ? 'Уже подписан' : 'Подписаться'}
        </button>
    )
}

export default SubscribeButton